
    <div class="container-fluid">
        <div class="row body_content">
            <div class="panel panel-primary">
	        <div class="panel-heading mediaman" data-i18n="mediaman.Media Managment"></div>
                <div class="panel-body">
                    <table>
                        <tr>
                            <td width="100%"><div class="progress-container"><div class="progress-bar"></div></div></td>
                            <td class="progress-text" nowrap="nowrap"></td>
                        </tr>
                    </table>
                    <h4>Transcode in</h4>
                    <ul class="list-group" id="transcodeinlist"></ul>
                    <ul class="resumable-list"></ul>
                    <h4>Transcode out</h4>
                    <ul class="list-group" id="transcodeoutlist"></ul>
                    <button class="btn btn-primary mediaman" id="mediaupload"><span data-i18n="mediaman.Media Upload"></span></button>
                </div>
            </div>
        </div>
    </div>

    <script src="js/resumable.js"></script>
    <script>

    function refresh_transcode_in_list () {
        $.get ("/media/transcodeinlist", function (list) {
            $('#transcodeinlist').html("");
            for (var i = 0, media; media = list[i]; i++) {
                var li = '<li class=\"list-group-item\" id=\"in/' + media + '\">' + media;
                li += ' <a href="javascript:void(0)" onclick="remove_media(\'in/' + media + '\')"><span class="glyphicon glyphicon-trash"></span></a>'
                li += ' <a href="/media/download/transcode/in/' + media + '"><span class="glyphicon glyphicon-save"></span></a>'
                $('#transcodeinlist').append(li);
            }
            $("#transcodeinlist li:odd").css ("background", "Lavender");
        });
    }

    function refresh_transcode_out_list () {
        $.get ("/media/transcodeoutlist", function (obj) {
            for (name in obj) {
                for (var i = 0, media; media = obj[name][i]; i++) {
                    var li = '<li class=\"list-group-item\" id=\"out/' + name + '/' + media + '\">' + name + '/' + media;
                    li += ' <a href="javascript:void(0)" onclick="remove_media(\'out/' + name + '/' + media + '\')"><span class="glyphicon glyphicon-trash"></span></a>'
                    li += ' <a href="/media/download/transcode/out/' + name + '/' + media + '"><span class="glyphicon glyphicon-save"></span></a>'
                    $('#transcodeoutlist').append(li);
                }
            }
            $("#transcodeoutlist li:odd").css ("background", "Lavender");
        });
    }

    function remove_media (media) {
        $.get("/media/rm/transcode/" + media, function (response) {
            $("li[id='" + media + "']").remove ();
            $("#transcodeinlist li:even").css ("background", "White");
            $("#transcodeinlist li:odd").css ("background", "Lavender");
            $("#transcodeoutlist li:even").css ("background", "White");
            $("#transcodeoutlist li:odd").css ("background", "Lavender");
        });
    }

    $ (document).ready (function () {
        $.get("/admin/getconf", function (data) {
            if (data.result == "success") {
                Document.GstreamillConf.conf = data.data;
            } else {
                bootbox.alert ("Get Configure Failure: " + data.reason);
                return;
            }

            $.i18n.init({
                lng: Document.GstreamillConf.language[Document.GstreamillConf.conf.language]
            }, function(t) {
                $(".nav").i18n ();
                $(".mediaman").i18n ();
            });
        });

        // Media upload
        var r = new Resumable({
            target: '/media/upload',
            forceChunkSize: true,
            method: 'octet',
            simultaneousUploads: 1
        });

        r.assignBrowse($('#mediaupload'));

        r.on('fileAdded', function(file){
            $('.resumable-list').append('<li class="resumable-file-' + file.uniqueIdentifier + '">Uploading <span class="resumable-file-name"></span> <span class="resumable-file-progress"></span>');
            $('.resumable-file-' + file.uniqueIdentifier + ' .resumable-file-name').html(file.fileName);
            r.upload();
        });

        r.on('complete', function(){
            $('.resumable-progress .progress-resume-link, .resumable-progress .progress-pause-link').hide();
        });

        r.on('fileSuccess', function (file, message) {
            $('.resumable-file-' + file.uniqueIdentifier).remove ();
            refresh_transcode_in_list ();
        });

        r.on('fileError', function(file, message){
            $('.resumable-file-' + file.uniqueIdentifier+' .resumable-file-progress').html('(file could not be uploaded: ' + message + ')');
        });

        r.on('fileProgress', function(file){
            $('.resumable-file-' + file.uniqueIdentifier + ' .resumable-file-progress').html(Math.floor(file.progress()*100) + '%');
            $('.progress-bar').css({width:Math.floor(r.progress()*100) + '%'});
        });

        refresh_transcode_in_list ();
        refresh_transcode_out_list ();
    });
    </script>
